
<style lang="scss" scoped>
.scroll {
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
}

.container {
  position: fixed;
  width: 100%;
  top: 0px;
  bottom: 0;
  background: #f0f0f0;
  .info-box_detail {
    height: auto;
    position: relative;
    padding: 0 !important;
    .team-bg {
      width: 100%;
      height: 305px;
      padding-top: 20px;
      background: url("/static/ethel_img/team/team_bg@2x.png") center center
        no-repeat;
      background-size: 100% 100%;
      .user-icon {
        width: 71px;
        height: 71px;
        display: block;
        background: url("/static/ethel_img/team/my_head_bg@2x.png") center
          center no-repeat;
        background-size: 100% 100%;
        padding: 5px;
        img {
          width: 100%;
          height: 100%;
          display: block;
          border-radius: 50%;
        }
      }
      .user-name {
        color: #fff;
        font-size: 14px;
        margin-top: 5px;
      }
      .user-code {
        color: rgba(255, 193, 102, 1);
        font-size: 12px;
        margin-top: 9px;
      }
      .user-tiem {
        font-size: 12px;
        color: #fff;
        margin-top: 6px;
      }
      .user-superior {
        font-size: 12px;
        color: #fff;
        margin-top: 12px;
      }
      .user-wrap {
        height: 100%;
        width: 100%;
      }
    }
    .team-count {
      border-right: 1px solid rgba(191, 191, 191, 1);
    }
    .team-count:last-child {
      border-right: none;
    }
    .team-count__tit {
      font-size: 12px;
      color: #fff;
      img {
        width: 22px;
        height: 22px;
        display: block;
      }
    }
    .team-count__num {
      font-size: 21px;
      color: #fff;
      margin-top: 20px;
    }

    .team-lower {
      width: 100%;
      height: 73px;
      font-size: 18px;
      font-weight: 500;
      padding-left: 15px;
      background: #fff;
      img {
        width: 28px;
        height: 23px;
        display: block;
        margin-right: 5px;
      }
    }
  }
  .team-list {
    width: 100%;
    height: auto;
    padding: 0 15px;
    li {
      width: 100%;
      height: 170px;
      margin-top: 20px;
      background: #fff;
      .tit {
        height: 40px;
        padding: 0 15px;
        border-bottom: 1px solid rgba(238, 238, 238, 1);
        span {
          font-weight: 500;
        }
        p > span {
          color: rgba(153, 153, 153, 1);
          margin-right: 6px;
        }
      }
      .info {
        height: 80px;
        padding: 0 15px;
        .info_icon {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          border: 1px solid rgba(191, 191, 191, 1);
          margin-right: 8px;
          img {
            width: 100%;
            height: 100%;
            display: block;
            border-radius: 50%;
          }
        }
        .info_name {
          font-size: 16px;
          font {
            display: inline-block;
            width: 85px;
            height: 15px;
            color: #4e3609;
            text-align: center;
            font-size: 10px;
            background: url("/static/ethel_img/team/my_img_partner@.png") center
              center no-repeat;
            background-size: 100% 100%;
            margin-top: 8px;
            line-height: 15px;
          }
        }
      }
      .cout {
        padding: 0 15px;
        font-size: 12px;
        color: rgba(102, 102, 102, 1);
        display: inline-block;
        position: relative;
        line-height: 38px;
        span:first-child {
          margin-right: 20px;
        }
        .count-span {
          display: inline-block;
          padding-left: 20px;
          border-left: 1px solid rgba(191, 191, 191, 1);
        }
        button {
          outline: none;
          border: none;
          background: rgba(188, 149, 92, 1);
          width: auto;
          display: inline-block;
          height: 25px;
          line-height: 25px;
          font-size: 14px;
          text-align: center;
          color: #fff;
          border-radius: 13px;
          right: 15px;
          position: absolute;
          top: 6px;
        }
      }
    }
  }
}
.layer {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  padding: 0 20px;
  background-color: rgba(0, 0, 0, 0.3);
  .tit {
    width: 100%;
    height: 82px;
    background: url("/static/ethel_img/team/team_img_bg@2x.png") center center
      no-repeat;
    background-size: 100% 100%;
  }
  .layer-info {
    background: #fff;
    padding-top: 20px;
    width: 100%;
    ul {
      width: 100%;
      height: auto;
      li {
        width: 100%;
        height: 44px;
        line-height: 44px;
        text-align: center;
        color: #999;
        font-size: 14px;
        &.active {
          background: rgba(243, 243, 243, 1);
        }
      }
    }
    .layer-btn {
      width: 100%;
      padding: 0 25px;
      margin: 20px 0;
      button {
        width: 100%;
        height: 40px;
        line-height: 40px;
        color: #fff;
        font-size: 15px;
        outline: none;
        border: none;
        background: #333;
      }
    }
    .tip {
      text-align: center;
      font-size: 12px;
      color: rgba(153, 153, 153, 1);
      padding-bottom: 30px;
    }
  }
  .layer-input {
    width: 100%;
    height: auto;
    padding: 0 25px;
    span {
      font-weight: 500;
    }
    input {
      width: 100%;
      height: 44px;
      line-height: 44px;
      background: rgba(243, 243, 243, 1);
      padding-left: 12px;
      font-size: 13px;
      margin: 8px 0;
    }
  }
}
.user-level {
  min-width: 68px;
  height: 15px;
  text-align: center;
  color: #4e3609;
  font-size: 10px;
  background: url("/static/ethel_img/team_img_partner@2x.png") center center no-repeat;
  background-size: 100% 100%;
  margin-top: 5px;
}
.freeget-record{
  text-align: right;
  position: absolute;
  display: block;
  right: .3rem;
  top: .3rem;
  a{
    color: #fff;
    font-size: .34rem;
  }
}
</style>

<template>
  <div class="withdrawal">
    <!-- <ComHeader title="购物车" leftArrow="true"/> -->
    <div class="container">
      <scroll
        class="scroll"
        :data="teamList"
        :pullup="isPullup"
        @scrollToEnd="searchMore"
        ref="suggest"
      >
        <div class="info-box_detail">
          <div class="freeget-record">
            <router-link :to="{ name: 'NewFreegetRecord', params: {} }">领取记录</router-link>
          </div>
          <div class="team-bg flex-display flex-display-column flex-center-align">
            <div class="user-icon">
              <img :src="ethelWxUserInfo.headimgurl" />
            </div>
            <span class="user-name">{{ethelWxUserInfo.nickname}}</span>
            <span class="user-level">{{ethelWxUserInfo.level}}</span>
            <span class="user-code">ID:{{ethelWxUserInfo.id}}</span>
            <span class="user-tiem">注册时间:{{ethelWxUserInfo.regdate.substring(0,10)}}</span>
            <span class="user-superior">我的上级：{{ethelWxUserInfo.parent_id}}</span>
            <div class="user-wrap flex-num-one flex-display flex-center-align">
              <div
                class="team-count flex-num-one flex-center-pack flex-display flex-center-align flex-display-column"
              >
                <p class="team-count__tit flex-display flex-center-align">
                  团队人数
                  <img
                    src="/static/ethel_img/team/team_icon_editor@2x.png"
                    @click="fnOpenLayer()"
                  />
                </p>
                <p class="team-count__num flex-display flex-center-align">{{teamCount}}</p>
              </div>
              <div
                class="team-count flex-num-one flex-center-pack flex-display flex-center-align flex-display-column"
              >
                <p class="team-count__tit flex-display flex-center-align">直属下级</p>
                <p class="team-count__num flex-display flex-center-align">{{lowerCount}}</p>
              </div>
            </div>
          </div>
          <div class="team-lower flex-display flex-center-align">
            <img src="/static/ethel_img/team/team_icom_subordinate@2x.png" />
            <span>我的直属下级</span>
          </div>
          <ul class="team-list" v-if="teamList && teamList.length">
            <li
              @click="fnSelectUser(item.id)"
              class="flex-display flex-display-column"
              v-for="(item, index) in teamList"
              :key="index"
            >
              <div class="tit flex-display flex-center-align">
                <span>ID:{{item.id}}</span>
                <p class="flex-num-one flex-display flex-right-pack">
                  <span>注册时间</span>
                  {{item.regdate}}
                </p>
              </div>
              <div class="info flex-display flex-center-align">
                <div class="info_icon flex-display flex-center-align">
                  <img :src="item.headimgurl" />
                </div>
                <div class="flex-display flex-display-column info_name">
                  <span>{{item.nickname}}</span>
                  <font>{{item.level}}</font>
                </div>
              </div>
              <div class="flex-num-one cout flex-display flex-center-align flex-center-pack">
                <span>直属下级:{{item.lowerCount}}</span>
                <span class="count-span">团队人数:{{item.teamCount}}</span>
                <button>修改等级</button>
              </div>
            </li>
          </ul>
        </div>
      </scroll>
    </div>
    <div
      @click="fnHandleLayer($event)"
      data-name="layer"
      class="layer flex-display flex-display-column flex-center-align flex-center-pack"
      v-if="showLayer"
    >
      <div class="tit"></div>
      <div class="layer-info">
        <!--等级列表-->
        <ul v-if="levelList && levelList.length && layerType == 1">
          <li
            v-for="(item, index) in levelList"
            :key="index"
            @click.stop.prevent="fnSelectLevel(item, index)"
            :class="{'active':levelIndex == index}"
          >{{item.name}}</li>
        </ul>

        <!--修改id-->
        <div class="layer-input flex-display flex-display-column" v-if="layerType == 2">
          <span>需要修改的ID</span>
          <input type="number" placeholder="请输入需要需改的团队人员ID" v-model="teamId" />
          <span>上级ID</span>
          <input type="number" placeholder="请输入需要绑定的上级ID" v-model="superiorId" />
        </div>
        <div class="layer-btn">
          <button @click.stop.prevent="fnUpddateLevel" v-if="layerType == 1">提交</button>
          <button @click.stop.prevent="fnUpddateWay" v-if="layerType == 2">提交</button>
        </div>
        <p class="tip">温馨提示：只能修改我的团队下级成员</p>
      </div>
    </div>
  </div>
</template>
<script>
import api from "@/fetch/api";
import ComHeader from "@/common/ComHeader";
import Scroll from "@/base/scroll/scroll";
import axios from "axios";
import { Toast, MessageBox, Indicator } from "mint-ui";

const SUCCESS_CODE = 200; // 请求成功参数
export default {
  data() {
    return {
      page: 1, // 默认获取第一页列表数据
      totalPage: 0, // 总页数
      teamCount: 0, // 团队人数
      lowerCount: 0, // 直属下级人数
      levelIndex: 0, // 等级索引
      isPullup: true, // 是否启用上拉加载
      teamList: [], // 团队列表数据
      levelList: [], // 等级列表
      layerType: 1, // 窗口类型
      teamId: "", // 修改的id
      superiorId: "", // 上级id
      targetId: "", // 当前选择按个用户id
      showLayer: false, // 是否显示弹窗
      showGradeLayer: false, // 是否显示业绩弹窗
      month_money: 0, // 当月业绩
      last_month_money: 0, // 上个月业绩
      ethelWxUserInfo: this.getlocalStorage(this.companyUnique) // 用户数据
    };
  },
  created() {
    document.title = "我的团队";
    if (this.ethelWxUserInfo) {
      // 获取团队总人数
      this.fnGeTeamCount();
      // 获取直属下级人数
      this.fnGeLowerCount();
      // 获取团队列表
      this.fnGetTeamList();
      // 获取等级类别
      this.fnGetlevel();
    }
  },
  methods: {
    /**
     * @author yang
     * @desc 获取本月与上个月的团队业绩
     */
    fnShowTeamGrade() {
      Indicator.open({
        text: "加载中...",
        spinnerType: "fading-circle"
      });
      let params = {
        id: this.ethelWxUserInfo.id
      }
      api.getTeamper(params).catch(res => {
        console.log(res)
        Indicator.close()
        if(res.status == SUCCESS_CODE && !res.data.code) {
          this.last_month_money = res.data.msg.last_month_money
          this.month_money = res.data.msg.month_money
          this.showGradeLayer = true
        }
      }).then(() => {
        Indicator.close()
      })
    },

    /**
     * @author yang
     * @desc 打开业绩记录页面
     */
    fnOpenGrade() {
      this.$router.push({
        name: "NewGrade"
      });
    },

    /**
     * @author yang
     * @desc 操作弹窗
     */
    fnHandleLayer(_event) {
      if (_event.target.dataset && _event.target.dataset.name == "layer") {
        this.showLayer = false;
      }
    },

    /**
     * @author yang
     * @desc 获取用户上下级关系
     * @param {String} _id 用户id
     */
    fnUpddateWay() {
      let params = {
        myid: this.ethelWxUserInfo.id,
        yuanid: this.teamId,
        tarid: this.superiorId
      };
      Indicator.open({
        text: "加载中...",
        spinnerType: "fading-circle"
      });
      api
        .moduserpath(params)
        .catch(result => {
          Indicator.close();
          console.log(result);
          if (result.status == SUCCESS_CODE) {
            Toast(result.data.msg);
            if (result.data.msg == "修改完成") {
              this.showLayer = false;
              this.teamList = [];
              // 获取直属下级人数
              this.fnGeLowerCount();
              // 获取团队列表
              this.fnGetTeamList();
            }
          }
        })
        .then(err => {
          Indicator.close();
        });
    },

    /**
     * @author yang
     * @desc 打开弹窗
     */
    fnOpenLayer() {
      this.layerType = 2;
      this.showLayer = true;
    },

    /**
     * @author yang
     * @desc 获取等级类别
     * @param {String} _id 用户id
     */
    fnSelectUser(_id) {
      // this.targetId = _id;
      // this.showLayer = true;
      // this.layerType = 1;
    },

    /**
     * @author yang
     * @desc 获取等级类别
     * @param {Object} _item 等级数据
     * @param {Number} index 等级索引
     */
    fnSelectLevel(_item, index) {
      this.levelIndex = index;
      this.targetItem = _item;
    },

    /**
     * @author yang
     * @desc 修改等级
     */
    fnUpddateLevel() {
      let param = {
        myid: this.ethelWxUserInfo.id,
        tarid: this.targetId,
        getlevel: this.targetItem.name,
        getpriority: this.targetItem.priority
      };

      api.moduserlevel(param).catch(result => {
        if (result.status == SUCCESS_CODE) {
          if (result.data.code) {
            Toast(result.data.msg);
          }
          if (!result.data.code) {
            Toast("修改成功");
            this.showLayer = false;
            this.teamList.forEach(item => {
              if (this.targetId == item.id) {
                item.level = this.targetItem.name;
              }
            });
          }
        }
      });
    },

    /**
     * @author yang
     * @desc 获取等级类别
     */
    fnGetlevel() {
      api.getuserlevel({}).catch(reult => {
        if (reult.status == SUCCESS_CODE) {
          this.levelList = reult.data.data;
        }
      });
    },

    /**
     * @author yang
     * @desc 获取团队总人数
     * @param {Object} _item 当前下级的数据
     */
    fnGeTeamCount(_item) {
      // Indicator.open({
      //   text: "加载中...",
      //   spinnerType: "fading-circle"
      // });
      let params = {
        id: _item ? _item.id : this.ethelWxUserInfo.id
      };
      api.getmyteam(params).catch(result => {
        if (result.status == SUCCESS_CODE) {
          _item
            ? (_item.teamCount = result.data.msg)
            : (this.teamCount = result.data.msg);
        }
      });
    },

    /**
     * @author yang
     * @desc 获取直属下级人数
     * @param {Object} _item 当前下级的数据
     */
    fnGeLowerCount(_item) {
      let params = {
        id: _item ? _item.id : this.ethelWxUserInfo.id
      };
      api.getnextteam(params).catch(result => {
        if (result.status == SUCCESS_CODE) {
          _item
            ? (_item.lowerCount = result.data.msg)
            : (this.lowerCount = result.data.msg);
        }
      });
    },

    /**
     * @author yang
     * @desc 获取直属下级人数
     */
    fnGetTeamList() {
      let params = {
        page: this.page,
        id: this.ethelWxUserInfo.id
      };
      api
        .mytem(params)
        .catch(result => {
          Indicator.close();
          console.log(result);
          if (result.status == SUCCESS_CODE) {
            this.totalPage = result.data.page_total;
            if (result.data.mytem.length) {
              result.data.mytem.forEach(item => {
                item.teamCount = item.teamCount;
                item.lowerCount = item.lowerCount;
              });
              this.teamList = [...this.teamList, ...result.data.mytem];
              // this.getlowerCount()
              this.teamList.forEach(item => {
                this.fnGeTeamCount(item);
                this.fnGeLowerCount(item);
              });


            }
          }
        })
        .then(res => {
          Indicator.close();
        });
    },



    /**
     * @desc 是否需要下拉加载
     */
    searchMore() {
      if (this.page < this.totalPage) {
        this.page++;
        this.fnGetTeamList();
        return;
      }
      Toast("我是有底线的");
    }
  },

  components: {
    Scroll,
    MessageBox,
    Indicator
  }
};
</script>
